<template>
    <div class="olt-requirement-pool-table-container">
        <el-card shadow="never" class="table-container">
            <template #header>
                <div class="buttons">
                    <div>              
                        极简 前/后：机房数量 <span> {{bbuStatisticsDataListRef[0].roomCount }} / {{bbuStatisticsDataListRef[1].roomCount }} </span> &nbsp;&nbsp;&nbsp; 机框数量 <span>{{bbuStatisticsDataListRef[0].frameCount }} / {{bbuStatisticsDataListRef[1].frameCount }}</span><br/>
                        &nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp; 基带板数量 <span>{{bbuStatisticsDataListRef[0].baseCount }} / {{bbuStatisticsDataListRef[1].baseCount }}</span>
                        &nbsp;&nbsp;&nbsp; 电源板数量 <span>{{bbuStatisticsDataListRef[0].powerCount }} / {{bbuStatisticsDataListRef[1].powerCount }}</span>
                        &nbsp;&nbsp;&nbsp; 主控板数量 <span>{{bbuStatisticsDataListRef[0].controlCount }} / {{bbuStatisticsDataListRef[1].controlCount }}</span>
                    </div>

                    <div>
                        <el-button
                            type="danger"
                            
                            @click="calBbuReturnResult"
                            ><ElSvgIcon
                                a-icon-name="el-icon-delete"
                                :aSize="15"
                            />&nbsp;生成极简方案
                        </el-button>
                        &nbsp;
                        <el-dropdown split-button>
                            导出
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="exportAll">
                                        <ElSvgIcon
                                            a-icon-name="el-icon-download"
                                        />导出所有</el-dropdown-item
                                    >
                                    <!-- <el-dropdown-item @click="exportQuery">
                                        <ElSvgIcon
                                            a-icon-name="el-icon-bottom"
                                        />导出筛选</el-dropdown-item
                                    > -->
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </div>
            </template>
        </el-card>

        <el-table
            v-loading="loadingRef"
            :data="tableListRef"
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >
            <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <el-table-column
                prop="originalApparatusRoomId"
                label="原机房编号"
                width="150"
                align="center"
                fixed
            />
            <el-table-column
                prop="bbuModel"
                label="BBU型号"
                width="100"
                align="center"
                fixed
            />
            <el-table-column
                prop="vendor"
                label="设备厂家"
                width="100"
                align="center"
            />
            <el-table-column
                prop="boardType"
                label="板卡类型"
                width="120"
                align="center"
            />
            <el-table-column
                prop="originalNodeId"
                label="原BBU NodeId"
                width="150"
                align="center"
            />
            <el-table-column
                prop="originalSlotIndex"
                label=" 原槽道号"
                width="110"
                align="center"
            />
            <el-table-column
                prop="action"
                label="整合动作"
                width="120"
                align="center"
            />
            <el-table-column
                prop="lastApparatusRoomId"
                label="整合后机房编号"
                width="150"
                align="center"
            />
            <el-table-column
                prop="lastNodeId"
                label="整合后BBU NodeId"
                width="150"
                align="center"
            />
            <el-table-column
                prop="lastSlotIndex"
                label="整合后槽道号"
                width="150"
                align="center"
            />
            
        </el-table>

        <Pagination
            v-if="totalRef > 0"
            v-model:total="totalRef"
            v-model:currentPage="queryParamsRef.pageNum"
            v-model:pageSzie="queryParamsRef.pageSize"
            @pagination="handleQuery"
        />
    </div>
    <!-- 弹窗 -->
    <!-- <ImportDialog
        ref="importDialogRef"
    ></ImportDialog> -->
</template>
<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { ElLoading, ElMessage, ElMessageBox, genFileId, vLoading } from "element-plus";

import Pagination from "@/components/pagination/pagination_index.vue";
import { NslUtilDownUpLoad } from "@/utils/down_up_load/NslUtilDownUpLoad";
import { EnumHttpMime } from "@/types/global/enums/enums_types";

import * as api from '@/api/bbu_return/bbu_return_action/bbu_retrun_action_api_index'
import {TypeBbuReturnActionPageQueryI,TypeBbuReturnActionTableRowI} from '@/api/bbu_return/bbu_return_action/bbu_return_action_type'
import { TypeBbuBoardStatusVoI, TypeBbuBoardStatusVoQueryI,TypeBbuStatisticsDataI } from "@/api/current_status/bbu_board_status/bbu_board_status_types";


//注意，这个查询模块，同 odn的查询模块基本一致，除了 消息不一样

const queryParamsRef = ref<TypeBbuReturnActionPageQueryI>({
    pageNum: 1,
    pageSize: 10,
});

const loadingRef = ref(false);
const idsRef = ref<number[]>([]);
const totalRef = ref(0);

const tableListRef = ref<TypeBbuReturnActionTableRowI[]>();

const addEditFormDialogRef = ref();
const importDialogRef = ref();

const bbuStatisticsInit={
    baseCount:0,
    frameCount:0,
    powerCount:0,
    roomCount:0,
    controlCount:0
}

const bbuStatisticsDataListRef=ref<TypeBbuStatisticsDataI[]>([
    Object.assign({},bbuStatisticsInit),Object.assign({},bbuStatisticsInit)
])

async function handleQuery() {
    loadingRef.value = true;
    // console.log('queryParamsModel.value =',queryParamsModel.value);
    //let nslPageMap = obj2NslPageMap2(queryParamsModel.value);
    // console.log('nslPageMap = ',queryParamsModel.value);
    // let queryParamFix: TypeBroadBrandPortUsedRateQueryI;
    api.getPage(queryParamsRef.value)
        .then(({ data }) => {
            tableListRef.value = data.list;
            totalRef.value = data.total;
        })
        // .finally(() => {
        //     loadingRef.value = false;
        // });
    const respone=await api.calBoardStatisticDataList();
    
    bbuStatisticsDataListRef.value=respone.data;
    loadingRef.value = false;
    
}



function openAddOrEdidDialog(id?: number) {
    addEditFormDialogRef.value.openDialog(id);
}

const removeIdsRef = ref([]);

/** 行选中 */
function handleSelectionChange(selection: any) {
    removeIdsRef.value = selection.map((item: any) => item.id);
}
// function handleDelete(id?: number) {
//     let idArray: number[];
//     if (id) {
//         idArray = [id];
//     } else {
//         idArray = removeIdsRef.value;
//     }
//     if (idArray.length === 0) {
//         ElMessage.warning("请勾选删除项");
//         return;
//     }
//     ElMessageBox.confirm("确认删除记录?", "警告", {
//         confirmButtonText: "确定",
//         cancelButtonText: "取消",
//         type: "warning",
//     }).then(() => {
//         api.deleteByIdArray(idArray)
//             .then(() => {
//                 ElMessage.success("删除成功");
//                 //如果在第一页，保持不变
//                 //如果不在第一页
//                 //a. 删除数量如果等于pageData.length，则pageNum-1
//                 //b. 如果删除数量<pageData.length，则pageNum不变
//                 if (
//                     queryParamsModel.value &&
//                     queryParamsModel.value.pageNum &&
//                     queryParamsModel.value.pageNum > 1
//                 ) {
//                     if (idArray.length === tableListRef.value!.length) {
//                         queryParamsModel.value.pageNum--;
//                     }
//                 }
//                 handleQuery();
//             })
//             .catch(() => {
//                 ElMessage.error("删除失败");
//             });
//     });
// }


const calBbuReturnResult=async ()=>{
    // loadingRef.value = true;
    openFullScreenLoading()
    await api.calBbuReturnAction();
    handleQuery();
    closeFullScreenLoading()
    // loadingRef.value = false;
}

onMounted(() => {
    handleQuery();
});

const fullscreenLoadingRef = ref();

const openFullScreenLoading = () => {
    fullscreenLoadingRef.value= ElLoading.service({
    lock: true,
    text: '处理中',
    background: 'rgba(0, 0, 0, 0.7)',
  })
//   setTimeout(() => {
//     loading.close()
//   }, 2000)
}

const closeFullScreenLoading=()=>{
    fullscreenLoadingRef.value.close();
}

//#region download and upload
/** 下载导入模板 */
// function downloadTemplate() {
//     api.downloadTemplate().then((response: any) => {
//         const fileData = response.data;
//         const fileName = decodeURIComponent(
//             response.headers["content-disposition"].split(";")[1].split("=")[1]
//         );
//         // const fileType =
//         //     'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8';
//         NslUtilDownUpLoad.downloadFile(
//             fileData,
//             EnumHttpMime.OFFICE_XLSX,
//             fileName
//         );
//     });
// }

/** 导出查询 */
// function exportQuery() {
//     let map=obj2Map(queryParamsModel.value);
//     api.exportQuery(queryParamsModel.value).then((response: any) => {
//         const fileData = response.data;
//         const fileName = decodeURIComponent(
//             response.headers["content-disposition"].split(";")[1].split("=")[1]
//         );
//         // const fileType =
//         //     'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8';
//         NslUtilDownUpLoad.downloadFile(
//             fileData,
//             EnumHttpMime.OFFICE_XLSX,
//             fileName
//         );
//     });
// }
/**
 * 导出所有数据
 */
async function exportAll() {
    const response = await api.exportAll();
    const fileData = response.data;
    const fileName = decodeURIComponent(
        response.headers["content-disposition"].split(";")[1].split("=")[1]
    );
    // const fileType =
    //     'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8';
    NslUtilDownUpLoad.downloadFile(
        fileData,
        EnumHttpMime.OFFICE_XLSX,
        fileName
    );
}
//#endregion

const openImportDialog = () => {
    importDialogRef.value.openDialog();
};
</script>
<style lang="scss" scoped>
.buttons {
    display: flex;
    justify-content: space-between;
    span {
       color: red; 
       font-weight: 600;
    }
}
</style>
